<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户登录 - 学远培训</title>
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css">
    <link rel="stylesheet" href="__STATIC__/css/login.css" media="all">
    <script type="text/javascript" src="https://cdn.bootcss.com/modernizr/2010.07.06dev/modernizr.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/prefixfree/1.0.7/prefixfree.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body class="layui-layout-body">
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<div id="main">
    <div id="logo">学远培训登录</div>
    <form class="layui-form" action="dologin" method="post">
        <div class="form-item">
            <label>
                <i class="fa fa-user-o"></i>
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                       id="username" autocomplete="off" class="form-input" autofocus>
            </label>
        </div>
        <div class="form-item">
            <label>
                <i class="fa fa-unlock-alt"></i>
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       id="password" autocomplete="off" class="form-input">
                <a id="show_a" title="显示密码"><i id="showPass" class="fa fa-eye"></i></a>
            </label>
        </div>
        <div class="form-item">
            <label>
                <i class="fa fa-check-circle-o"></i>
                <input type="text" name="code" required lay-verify="required" placeholder="请输入验证码"
                       id="code" autocomplete="off" class="form-input">
                <canvas id="codeImg" title="看不清，换一张"></canvas>
            </label>
            <div class="input-block" style="text-align: right;color: white;margin-top: 10px;"><a href="register" style="color: white">还没有账号？点击注册</a></div>
        </div>
        <div class="form-item" >
            <div class="input-block">



                <button class="form-btn" type="submit" lay-submit lay-filter="login">登录</button>
                <button id="clear" class="form-btn" type="reset" style="margin-left: 12px">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="__STATIC__/layui/layui.js"></script>
<script>

    layui.use(['form', 'element'], function () {

    });

    $("#clear").click(function () {
        $("#username").val("").focus();
        changeImg();
    });

    $("#showPass").click(function () {
        if ($("#showPass").attr("class") == 'fa fa-eye') {
            $("#showPass").attr("class", 'fa fa-eye-slash');
            $("#password").attr("Type", "text");
            $("#show_a").attr("title", "隐藏密码");
        } else {
            $("#showPass").attr("class", 'fa fa-eye');
            $("#password").attr("Type", "password");
            $("#show_a").attr("title", "显示密码");
        }
    });
</script>
<script type="text/javascript">
    let code;

    document.getElementById("codeImg").onclick = changeImg;

    function changeImg() {
        let arrays = new Array(
            '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
            'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
            'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
            'U', 'V', 'W', 'X', 'Y', 'Z'
        );

        let canvas_width = $('#codeImg').width();
        let canvas_height = $('#codeImg').height();
        let canvas = document.getElementById("codeImg");
        let context = canvas.getContext("2d");
        canvas.width = canvas_width;
        canvas.height = canvas_height;

        code = '';
        for (let i = 0; i < 4; i++) {
            let r = parseInt(Math.random() * arrays.length);
            code += arrays[r];

            let deg = Math.random() - 0.5;
            let txt = arrays[r];
            let x = 12 + i * 20;
            let y = 15 + Math.random() * 8;
            context.font = "bold 23px 微软雅黑";
            context.translate(x, y);
            context.rotate(deg);
            context.fillText(txt, 0, 0);
            context.rotate(-deg);
            context.translate(-x, -y);

        }

        for (let i = 0; i <= 5; i++) {
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (let i = 0; i <= 30; i++) {
            context.strokeStyle = randomColor();
            context.beginPath();
            let x = Math.random() * canvas_width;
            let y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }


    function check() {
        let input_code = document.getElementById('code').value;
        if (input_code.toLowerCase() == code.toLowerCase()) {
            return true;
        }
        layer.msg("验证码输入有误，点击图片可以更换验证码！");
        $("#code").val("").focus();
        return false;
    }

    window.onload = changeImg;
</script>
</body>
</html>